import React, { memo, Suspense, useState, useEffect } from 'react'
import { useRoutes } from 'react-router-dom'
import { message } from 'antd';

import routes from './router'
import MainHeader from './components/main-header'
import MainFooter from './components/main-footer'
import Player from './views/player'
import GlobalModal from './components/global-modal'
import { shallowEqualApp, useAppDispatch, useAppSelector } from './store'
import { LoginContentWrapper } from './assets/css/options'
import { phoneReg } from './assets/data/regular'
import { getVerifyCodeAction } from './store/modules/user';
import { setLoginModelVisiable } from './store/modules/options';

const App = memo(() => {

  const dispatch = useAppDispatch()

  const { loginModelVisiable } = useAppSelector(
    (state) => ({
      loginModelVisiable: state.options.loginModelVisiable
    }),
    shallowEqualApp
  )

  // 点击登录的取消
  const closeLoginModal = () => {
    console.log('关闭登录弹框')
    dispatch(setLoginModelVisiable(false))
  }
  // 点击登录的确定
  const confirmLoginModal = () => {
    console.log('确定登录')
    dispatch(setLoginModelVisiable(false))
  }
  const [code, setCode] = useState<number>(30)
  const [timer, setTimer] = useState<any>(null)
  const [phone, setPhone] = useState<string | number>('')
  const [captcha, setCaptcha] = useState<string | number>('')
  // 点击获取验证码
  const getCode = () => {
    // 验证手机号
    if (!phoneReg.test(phone as string)) {
      message.open({
        type: 'error',
        content: '手机号格式错误'
      })
      return
    }
    // 发送请求获取验证码
    dispatch(getVerifyCodeAction(Number(phone)))
    // 发送请求成功后，设置定时器
    // 设置定时器
    if (code === 30) {
      setCode(29)
      setTimer(
        setInterval(() => {
          setCode((per: number) => per - 1)
        }, 1000)
      )
    }
  }
  // 清除定时器
  useEffect(() => {
    if (code === 0) {
      clearInterval(timer)
      setCode(30)
    }
  }, [code])

  return (
    <div>
      <MainHeader></MainHeader>
      <Suspense fallback="">{useRoutes(routes)}</Suspense>
      <MainFooter></MainFooter>
      {/* 登录的弹框 */}
      <GlobalModal
        visible={loginModelVisiable}
        title="手机号登录"
        confirmText="登录"
        closeLoginModal={closeLoginModal}
        confirmLoginModal={confirmLoginModal}
      >
        <LoginContentWrapper>
          <div className="content">
            <input
              type="number"
              className="phone_input"
              placeholder="请输入您的手机号"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />
            <div className="code">
              <input
                type="number"
                className="check_code_input"
                placeholder="请输入你的验证码"
                value={captcha}
                onChange={(e) => setCaptcha(e.target.value)}
              />
              <div className="send_code" onClick={getCode}>
                <span>{code === 30 ? '获取验证码' : `${code}s后重新获取`}</span>
              </div>
            </div>
          </div>
        </LoginContentWrapper>
      </GlobalModal>
      {/* 播放器 */}
      <Player></Player>
    </div>
  )
})

export default App
